<template>
  <view class="container">
	  <view class="head-imag">
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		    <image class="avatar" :src="userInfo.avatarUrl"></image>
		</button> 
	  </view>
	  <uni-list-item  title="昵称" :rightText="userInfo.nickName" showArrow @tap="openPop_nickname()"></uni-list-item>
	  <uni-list-item  title="性别" :rightText="userInfo.sex" showArrow @tap="openPop_sex()"></uni-list-item>
	  <uni-list-item  title="生日" :rightText="userInfo.birthday" showArrow @tap="openPop_date()"></uni-list-item>
	  <uni-list-item  title="个人介绍" :rightText="userInfo.description" showArrow @tap="openPop_description()"></uni-list-item>
	  <view class="datetime">
		  <uni-datetime-picker ref="datetime" type="date" v-model="single" 
		  :border="false" @change="changeDateTime"/>
	  </view>
	  <button class="submit save" @tap="save()">保存</button>
	  <button class="submit exit" @tap="exit()">退出登录</button>
  </view>
</template>

<script>
import { getUserProfile } from "@/api/system/user"
import { clearStorageAll,setUserInfo } from "../../../utils/auth"
import request from '../../../utils/request.js'
import {mapState,mapMutations} from 'vuex'
import { SourceTextModule } from "vm"
import { baseUrl,qiniuCloudUrl } from "../../../config"
  export default {
    data() {
      return {
		  single: '',//时间选择器值
          userInfo: {},
      }
	},
	onReady() {
		//初始化值
		this.getUserInfo()
	},
    onLoad() {
     
    },
	computed: {
		
	},
	mounted() {
		
	},
    methods: {
		...mapMutations('user',['SET_ISLOGIN','SET_USERINFO','SET_TOKEN','CLEAR_TOKEN']),
		//获取用户信息
        getUserInfo() {
        	request({
        		url: '/userInfo/getByToken',
        	}).then(res => {
        		console.log(res)
        		this.userInfo = res.data
				this.userInfo.avatarUrl = this.userInfo.avatarUrl.replaceAll('?','%3F').replaceAll('=','%3D')
        	})
        },
		//获取头像链接
	    onChooseAvatar(e) {
			const { avatarUrl } = e.detail 
			// this.userInfo.avatarUrl = avatarUrl
			
			//通过头像链接获取图像传给后端
			uni.uploadFile({
				url: baseUrl + '/upload/updateAvatarUrl', //仅为示例，非真实的接口地址
				filePath: avatarUrl,
				name: 'file',
				formData: {
					userId: this.userInfo.userId
				},
				success: (res) => {
					res = JSON.parse(res.data)
					if(res.code == 200){
						console.log(res)
						let url = res.data.replaceAll('?','%3F').replaceAll('=','%3D')
						this.userInfo.avatarUrl = url
						setUserInfo(this.userInfo)
					}
				},
				fail: err => {
					console.log(err)
				}
			});
	    },
		//打开修改昵称弹窗
		openPop_nickname() {
			uni.showModal({
				icon: '',
				title: '请输入昵称',
				editable: true,
				success: (res) => {
					if(res.confirm) {
					    console.log('用户点击确定')
						if(res.content.length > 15 || res.content.length == 0)
						    uni.showToast({
						    	title: '请输入1到15长度范围内的昵称',
								icon: 'none'
						    })
						else  this.userInfo.nickName = res.content
					}else if (res.cancel) {
					    console.log('用户点击取消')
					}
				},
				fail: () => {
					
				}
			})
		},
		//打开修改个人签名弹窗
		openPop_description() {
			uni.showModal({
				icon: '',
				title: '请输入个人签名',
				editable: true,
				success: (res) => {
					if(res.confirm) {
					    console.log('用户点击确定')
						if(res.content.length > 30 || res.content.length == 0)
						    uni.showToast({
						    	title: '请输入1到30长度范围内的昵称',
								icon: 'none'
						    })
						else this.userInfo.description = res.content
					}else if (res.cancel) {
					    console.log('用户点击取消')
					}
				},
				fail: () => {
					
				}
			})
		},
		//打开修改性别弹窗
		openPop_sex() {
			uni.showActionSheet({
			  itemList: ['男', '女'],
			  success: (res) => {
				this.userInfo.sex = res.tapIndex?'女':'男'
			  },
			  fail: (res) => {
			    console.log(res.errMsg)
			  }
			})
		},
		//打开修改生日日期弹窗
		openPop_date() {
			//显示弹窗
		    this.$refs.datetime.show()
			
		},
		//确定日期时间时触发的事件，参数为当前选择的日期对象
		changeDateTime(e) {
			console.log(e)
			this.userInfo.birthday = e
		},
		//保存用户信息
		save() {
			uni.showModal({
				icon: '',
				title: '确定保存信息吗',
				success: (res) => {
					uni.showLoading({	
						mask: true
					})
					//向后端发送请求，保存数据到数据库
					request({
						url: '/userInfo/updateById',
						method: 'post',
						data: this.userInfo
					}).then(res => {
						uni.hideLoading()
						//跳转user页面
						uni.reLaunch({
						    url: '/pages/photo/user/index'
						})
					})
				},
				fail: (err) => {
					uni.hideLoading()
				}
			})
		},
		//退出登录
		exit() {
			//清除所有缓存
			clearStorageAll()
			uni.reLaunch({
			    url: '/pages/photo/user/index'
			})
		},
		
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #ffffff;
  }
  .head-imag {
	  height: 150px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  
	  .avatar-wrapper {
	  	  width: 60px;
	  	  height: 60px;
		  padding: 0;
	  }
	  
	  .avatar {
		  width: 60px;
		  height: 60px;
	  }
  }
  
  .submit {
	  math-style: 20px;
	  background-color: #fff;
	  color: black;
	  height: 40px;
	  line-height: 40px;
	  font-size: 13px;
  }
  
  .save {
	  
  }
  
  .exit {
	  margin-top: 10px;
  }
  
  .datetime {
	  position: absolute;
	  width: 0;
	  height: 0;
  }
  

  /deep/ .uni-list-item__extra-text {
	  text-align: right;
	  width: 300rpx;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  overflow: hidden;
  }
</style>
